<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :append-to-body="true"
    class="open-invoice-common-dialog medium-common-dialog-size"
    width="450px">
    <div class="main">
      <Title title="历史记录" font-size="16px" class="mb16"/>
      <el-table
        v-if="list && list.items.length > 0"
        :data="list.items"
        height="60vh"
        style="width: 100%">
        <el-table-column label="备注" min-width="120">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.remark" />
          </template>
        </el-table-column>
        <el-table-column label="记录人" min-width="120">
          <template slot-scope="scope">
            <CheckUserInfo v-if="scope.row.recorder" :label="scope.row.recorder" :user-id="scope.row.recorderId" />
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column label="所属部门" min-width="120">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.department" />
          </template>
        </el-table-column>
        <el-table-column label="记录时间" min-width="120">
          <template slot-scope="scope">
            <ToolTip :content="standardFormat(scope.row.recordTime, 'YYYY/MM/DD HH:mm')" />
          </template>
        </el-table-column>
      </el-table>
      <EmptyPlaceholder v-else slot="empty" empty-text="暂无数据" mode="table" style="padding-bottom: 0;" />
      <el-row type="flex" justify="end">
        <el-pagination
          v-show="list.total > 0"
          :current-page="list.page"
          :page-size="list.perPage"
          :total="list.total"
          :small="true"
          :page-sizes="[10, 20, 50]"
          :layout="pageLayout"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import Title from '@/components/Title';
import { getClientRemarkList } from '@/api/customer';
import { standardFormat } from '@/filters/date';
import { mapState } from 'vuex';

export default {
  components: { Title, EmptyPlaceholder },
  data() {
    return {
      dialogVisible: false,
      page: 1,
      perPage: 10,
      list: {
        items: [],
        total: 0
      },
      pageLayout: 'total, prev, pager, next, jumper'
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    standardFormat,
    getData(resetPage) {
      if (resetPage) {
        this.page = 1;
      }
      const params = {
        page: this.page,
        perPage: this.perPage,
        id: this.id
      };
      getClientRemarkList(params).then(res => {
        if (res.code === 200) {
          this.list = res.data;
        }
      }).catch();
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.getData();
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.getData(true);
    },
    handleOpen(id) {
      this.id = id;
      this.getData();
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  .el-table{
    overflow: auto;
  }
}
.mb16 {
  margin-bottom: 16px;
}
.btn-container {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}
</style>
